<template>
    <div class="statistical">
        <div class="content-box flex_between">
            <div class="left_content" ref="contentBoxRef">
                <div class="flex_between" ref="pointsBoxRef" style="height: 36px;">
                    <h3>{{ '仓库列表' }}</h3>
                </div>
                <div class="left_content_box" :style="{ height: dynamicHeight + 36 + 'px' }">
                    <LoadList :loading="warehouse_loading" :no-more="warehouse_hasMore" :containerHeight="dynamicHeight"
                        :distance="100" @load-more="warehouseLoadMoreData">
                        <template v-if="count_warehouse_ls && count_warehouse_ls.length > 0">
                            <div v-for="(ls, lsindex) in count_warehouse_ls" :key="lsindex"
                                @click.stop="cardsClick(ls)">
                                <cards :item_ls="ls" :currentId="warehouse_currentId">
                                    <template #rel_name_bottom></template>
                                </cards>
                            </div>
                        </template>
                        <empty v-else></empty>
                    </LoadList>
                </div>
            </div>
            <div class="right_content" ref="contentBoxRef">
                <div class="flex_between" ref="pointsBoxRef" style="height: 36px;">
                    <div class="flex_row">
                        <template v-if="warehouse_showBack">
                            <h3 class="">{{ warehouse_catTitle.cat_name || '--' }}</h3>
                        </template>
                        <template v-else>
                            <!-- <h3 class="mr10">{{ '仓库类目数量' }}</h3> -->
                            <div class="flex_row">
                                <span>仓库概览：</span>
                                <span class="font_black8">（</span>
                                <span>
                                    <span class="font_black8">仓库名称：</span>
                                    <span class="">{{ warehouse_class_info.store_name || '--' }}，</span>
                                </span>
                                <span class="ml10">
                                    <span class="font_black8">库存金额：</span>
                                    <span class="font_green">￥{{ warehouse_class_info.amount || '--' }}，</span>
                                </span>
                                <span class="ml10">
                                    <span class="font_black8">库存数量：</span>
                                    <span class="">{{ warehouse_class_info.qty || '--' }}</span>
                                </span>
                                <span class="font_black8">）</span>
                            </div>
                        </template>
                    </div>
                    <div class="flex_row">
                        <div class="mr10" v-if="warehouse_class_list && warehouse_class_list.length > 0">
                            <el-button type="primary" size="mini" icon="el-icon-download" @click="exportReport"
                                style="font-size: 12px;padding:5px">
                                <span v-if="warehouse_showBack">导出{{' ' + warehouse_catTitle.cat_name + ' '}}库存</span>                            
                                <span v-else>导出{{' ' + warehouse_class_info.store_name + ' ' }}库存</span>
                            </el-button>
                        </div>
                        <el-button size="mini" plain @click="goBack" v-if="warehouse_showBack"> 返回上级 </el-button>
                    </div>
                </div>
                <div class="right_content_box" :style="{ height: dynamicHeight + 36 + 'px' }">
                    <!-- 第二个展示表格 -->
                    <template v-if="warehouse_showBack">
                        <el-table v-loading="warehouse_goods_list_loading" :data="warehouse_goods_list" row-key="gdid"
                            border size="mini" show-summary style="width: 100%;margin-bottom: 20px;">
                            <el-table-column prop="goods_name" label="产品名称" sortable>
                                <template #default="{ row }">
                                    <span class="font_bule" style="cursor: pointer;" @click="clickGoodsItem(row)">{{
                                        row.goods_name }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="qty_min" label="库存" sortable>
                                <template #default="{ row }">
                                    <span>{{ row.qty_min || '--' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="amount" label="金额">
                                <template #default="{ row }">
                                    <span :class="{ 'font_green': row.amount > 0, 'font_red': row.amount < 0 }">{{
                                        row.amount || '--' }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <!-- 第一个展示表格 -->
                    <template v-else>
                        <el-table v-loading="warehouse_class_list_loading" :data="warehouse_class_list" row-key="catid"
                            border size="mini" show-summary cell-click="cellClick"
                            :tree-props="{ children: 'sub', hasChildren: 'hasChildren' }"
                            style="width: 100%;margin-bottom: 20px;">
                            <el-table-column prop="cat_name" label="存货统计" sortable>
                                <template #default="{ row }">
                                    <span class="font_bule" @click="clickCellItem(row)" style="cursor: pointer;"> {{
                                        row.cat_name }} </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="percent" label="占比" sortable>
                                <template #default="{ row }">
                                    <span>{{ row.percent + '%' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="amount" label="金额">
                                <template #default="{ row }">
                                    <span :class="{ 'font_green': row.amount > 0, 'font_red': row.amount <= 0 }">{{
                                        row.amount }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </div>
        </div>
        <warehouseDrawer ref="warehouseDrawerRef"></warehouseDrawer>
    </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick, watch, defineProps, defineExpose } from '@vue/composition-api'
import { useDynamicHeight } from '@/hooks/useDynamicHeight'
import LoadList from "@/components/commV2/LoadList/index.vue";
import cards from '@/pages/report/purchaseModule/cards.vue'
import warehouseDrawer from '@/pages/report/purchaseModule/warehouseDrawer.vue'

const contentBoxRef = ref(null)
const pointsBoxRef = ref(null)
const { dynamicHeight, updateHeight } = useDynamicHeight({
    containerRef: contentBoxRef,
    subtractRef: pointsBoxRef,
    extraHeight: 60 // 额外的间距
})
import { usePurchaseState } from '@/pages/report/hooks/usePurchaseState.js'
const {
    warehouse_loading,
    warehouse_hasMore,
    warehouseLoadMoreData,
    warehouse_currentId,
    count_warehouse_ls,
    loadWarehouseList,
    loadWarehouseDetail,
    warehouse_class_info,
    warehouse_class_list,
    warehouse_class_list_loading,
    getStoreViewListData,
    warehouse_showBack,
    goBack,
    warehouse_catTitle,
    warehouse_goods_list,
    warehouse_goods_list_loading,
    warehouse_goods_list_hasMore,
    warehouse_goods_list_pfrom,
    warehouse_goods_list_pnum,

    // 点击第二个表格商品
    clickGoodsItems,
    warehouse_goods_info,
    warehouse_goods_list_ls,
    warehouse_gdid,

    // 导出
    exportReport
} = usePurchaseState()

const cardsClick = (val) => {
    if (warehouse_currentId.value == val.store_id) { return }
    goBack()
    warehouse_currentId.value = val.store_id
    loadWarehouseDetail()
}

const clickCellItem = (row) => {
    warehouse_goods_list_loading.value = false
    warehouse_goods_list.value = []
    warehouse_goods_list_pfrom.value = 0
    getStoreViewListData(row)
}

const warehouseDrawerRef = ref(null)
const clickGoodsItem = (row) => {
    warehouse_goods_info.value = {}
    warehouse_goods_list_ls.value = []
    warehouse_gdid.value = row.gdid
    clickGoodsItems()
    warehouseDrawerRef.value.open()
}

onMounted(() => {
    // 在组件挂载后更新高度
    loadWarehouseList()
    nextTick(() => {
        updateHeight()
    })
    goBack()
})

defineExpose({
    // initFc
})
</script>

<style scoped lang="scss">
.statistical {
    height: 100%;
}

.content-box {
    box-sizing: border-box;
    padding: 0 10px;
    height: 100%;
    width: 100%;
    background: radial-gradient(18.89% 26.1% at 11.64% 11.63%, rgba(153, 102, 255, .15) 0, rgba(173, 51, 255, 0) 69.26%),
        radial-gradient(22.92% 24.7% at 96.41% 8.29%, rgba(0, 85, 255, .12) 0, rgba(204, 231, 255, .03) 100%),
        linear-gradient(180deg, #e0ecff, #edf2fa 13.9%, #f7f8fa 32.56%, #f5f6f7);
    background-color: #f6f7f9;
}

.left_content,
.right_content {
    width: 100%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 4px;
}

.left_content {
    width: 22%;
}

.right_content {
    flex: 1;
}

.left_content_box,
.right_content_box {
    // height: 100%;
    // max-height: calc(100vh - 68px);
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    padding: 10px;
    margin-top: 4px;
    overflow: auto;
    overflow-y: auto;
}

.active_bg {
    background-color: #f5f9ff;
}

.right_content_box ::v-deep .el-table__expand-icon {
    color: #007aff !important;
}
</style>
